iT邦幫忙

第 11 屆 iThome 鐵人賽

0
Modern Web

用Gatsby.js做出一個簡單的部落格系列 第 20

Day20. 將Gatsby專案放上Github Page

  • 分享至 

  • xImage
  •  

Day19,我們見識了Gatsby強大的功能,使用官方提供的starter,快速的做出了一個部落格。
而這個部落格本身,會包含我們所需要的資料,是一個靜態的網頁,因此我們不需要為這個網頁去架設一個司服器,而是任何能放靜態網頁的地方,都能夠把他上架。

今天,我們試著把它給上到Github Page上。

  1. 在Day19,我們已經用了npm run dev看到了我們完成的部落格網站,確認沒問題後,在command line執行npm run build對專案進行靜態頁面建構。
    每當我們的靜態資料發生更動時(例如新增文章或修改文章),我們都必須重新build,不然頁面本身的內容不會發生變化,雖然有其麻煩之處,但取而代之的便是網頁的速度以及建置的方便性。(不過透過Contentful的webhook可以做到資料變動時自動觸發重新佈署的功能,所以是個有辦法解決的問題)

  2. 建置完成後,在public內便會有你建置完成的整個專案。

  3. 接著,在github創建一個新的repository。

  4. 在將專案推上github前,打開package.json修改homepage屬性的值。


package.json

"homepage": "https://github.com/{username}/{repository name}",

和修改


gatsby-config.js

module.exports = {
  siteMetadata: {
    title: 'Gatsby Contentful starter',
  },
  pathPrefix: '/{repository name}',
  ...

  1. (略)我們是利用gh-pages這個工具來對專案進行部屬的,這個starter內已經有內建這個套件了,但若是沒有一般則須自行安裝。

command line

npm install --save gh-pages

  1. 在command line中執行git remote set-url origin git@github.com:{username}/{repository name}.git

  2. 執行npm run deploy,將專案部屬至github上。完成後,可以在儲存庫頁面上看到一個名為gh-pages的分支
    https://ithelp.ithome.com.tw/upload/images/20191025/20111629An4YNFufnE.png

  3. 在瀏覽器開啟https://{username}.github.io/{repository}/ ,便可以看到部屬完成的網頁。

https://ithelp.ithome.com.tw/upload/images/20191025/20111629PEUJzV445F.png

  1. 如果今天在Contentful中修改了資料,則須重新建置靜態頁面。方法很簡單,改完資料後,直接重新執行npm run deploy,gatsby便會重新的抓取更新資料,並建置靜態頁面後,重新上傳了。

現在,你有了一個部落格,以及一個容易管理的後台,然而,我們卻是在不知道其運作原理的情況下完成這件事的。如果是簡單的需求倒沒問題,但要客製化時,不懂原理的情況下,可能就容易遇到問題。
因此,接下來的章節,我們就是著從一個空的Gatsby專案開始,一步步地做出我們想要的功能,並試著了解其運作原理吧

本文參考contentful給的示範文件: https://www.contentful.com/r/knowledgebase/gatsbyjs-and-contentful-in-five-minutes/


上一篇
Day19. 用Gatsby+Contentful五分鐘內做出一個部落格吧
下一篇
Day21. 部落格功能規劃
系列文
用Gatsby.js做出一個簡單的部落格28
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言